<template>
<div class="box" >
<div class="list" v-for="item in order">
    <div style="margin: auto;margin-top: 10px;margin-bottom: 10px;">
    <div>
        id:{{ item.id }}
    </div>
   顾客：{{ item.user }}
   <div>
    下单时间：{{ item.starttime}}
   </div>
   <div>
    送达地址：{{ item.ddaddress }}
   </div>
   订单内容：
   <div v-for="res in item.order">
    商品名称：{{ res.name }}  数量：{{ res.num }}
   </div>
</div>
<el-button v-if="item.status!='已完成'" type="success"  class="btn" round @click="takeOrder(item.id)">完成订单</el-button>
<div v-else class="btn"> 订单已完成</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { finishOrder, getOrder } from '@/api/Order';
import { storeA } from '@/piniaStore/storeA'
import { ref } from 'vue';
const piniaStore = storeA()
var order:any = ref({})

async function fn(){
console.log(piniaStore.user.shopName)
   order.value = await getOrder(piniaStore.user.shopName as string)as any
   console.log(order.value)
}
fn()
function takeOrder(id:string){
    finishOrder(piniaStore.user.shopName as string,id)
    setTimeout(() => {
        fn()
    }, 2000);
}
</script>
<style scoped>
.box{
    display: flex;
    flex-flow:row wrap;
    width:100%;
}
.list{
    height: 350px;
    border-radius: 10px;
    width: 31%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: rgb(239, 247, 191);
    margin: 10px;
}
.btn{
    width: 50%;
    margin: auto;
}
</style>